<template>
  <!-- 当组件点击后触发 emit 的 click 事件 -->
  <div class="field-item" @click="emit('click')">
    <span class="label">{{ props.label }}</span>

    <div class="extra">
      <!-- 这里使用具名插槽 -->
      <slot name="content"></slot>
      <van-icon v-if="props.arrow" name="arrow" size="16px" color="#999" />
    </div>
  </div>

</template>

<script setup>
  // 定义了组件的 props
  const props = defineProps({
    label: String,
    arrow: {
      type: Boolean,
      default: () => true
    }
  })

  // 定义 emit 事件
  const emit = defineEmits(['click'])
</script>

<!-- mine中的列表组件 -->
<style scoped lang="less">
.field-item {
  height: 48px;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;

  &:active {
    background-color: darken(#fff, 10%);
  }

  .label {
    font-size: 12px;
    color: #505050;
  }

  .extra {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}
</style>
